<script setup lang="ts">
import {RouterView} from 'vue-router'
import HeadNav from './components/HeadNav.vue'</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header><HeadNav/></el-header>
      <el-container>
        <el-main class="main-container">
          <div class="background-wrapper">
            <div class="background-image"></div>
            <div class="background-overlay"></div>
          </div>
          <div class="content-wrapper">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.el-main {
  padding: 0;
  position: relative;
  min-height: calc(100vh - 70px);
  overflow: hidden;
}

.main-container {
  position: relative;
  height: 100%;
}

.background-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background-image {
  background-image: url('./assets/background.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  /* 移除了动画效果 */
  filter: blur(2px);
}

.background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.66) 0%,
      rgba(255, 255, 255, 0.66) 50%,
      rgba(245, 245, 245, 0.66) 100%
  );
  backdrop-filter: blur(1px);
}

.content-wrapper {
  position: relative;
  z-index: 10;
  height: 100%;
}

.el-header {
  height: 70px;
  padding: 0;
  position: relative;
  z-index: 20;
}
</style>
